<!--
 * @Autor: 张小鹏
 * @Date: 2020-04-02 11:40:24
 * @LastEditors: 张小鹏
 * @LastEditTime: 2020-04-17 14:47:21
 * @description: 
 -->
<template>
  <div>
    <virtual-table :vcolumns="columns" ref="virtualtablelist">
            <tablecolumn
                prop="date"
                label="日期"
                width="180">
              </tablecolumn>
              <tablecolumn
                prop="name"
                label="姓名"
                width="180">
              </tablecolumn>
              <tablecolumn
                prop="address"
                label="地址">
              </tablecolumn>
    </virtual-table>
    <div>
    <!-- 
      <fasttable
        :data="tableData2"
        style="width: 100%">
              <tablecolumn
                prop="date"
                label="日期"
                width="180">
              </tablecolumn>
              <tablecolumn
                prop="name"
                label="姓名"
                width="180">
              </tablecolumn>
              <tablecolumn
                prop="address"
                label="地址">
              </tablecolumn>
      </fasttable>
      -->
    </div>
  </div>
</template>

<script>
// fasttable
export default {
  components: {},
  data() {
    return {
      columns: [
        { prop: "date", label: "日期", width: 120 },
        { prop: "name", label: "名称", width: 120 },
        {
          prop: "address",
          label: "地址",
          width: 100,
          showOverflowTooltip: true
        }
      ],
      columns2: Array.from({ length: 500 }, (_, idx) => ({
        prop: "address",
        label: "地址" + idx,
        width: 200,
        showOverflow: true,
        sortable: true,
        fixed: ""
      })),
      tableData: Array.from({ length: 10000 }, (_, idx) => ({
        id: idx + 1,
        date: "2016-05-03",
        name: "名称" + idx,
        ab: "欢迎使用pl-table",
        address: 1 + idx
      })),
      tableData2: Array.from({ length: 30 }, (_, idx) => ({
        id: idx + 1,
        date: "2016-05-03",
        name: "名称" + idx,
        ab: "欢迎使用pl-table",
        address: 1 + idx
      }))
    };
  },
  mounted() {
    this.$refs.virtualtablelist.appendData(this.tableData);
  },
  methods: {
    clearSelection() {}
  }
};
</script>
<style>
.dsada {
  background-color: red;
}
.el-input__inner {
  height: 25px !important;
}
body,
html {
  overflow: auto;
  margin: 0;
  padding: 10px;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
</style>
